<template>
  <todo-header @add-todo="handleAddTodo"></todo-header>
  <todo-list>
    <draggable v-model="todos" animation="300" item-key="id">
      <template #item="{ element }">
        <todo-item
          v-bind="element"
          @toggle="handleToggle"
          @edit="handleEdit"
          @del="handleDel"
        ></todo-item>
      </template>
    </draggable>
  </todo-list>
  <todo-footer
    :todos="todos"
    @toggle-all="handleToggleAll"
    @clear-done="handleClearDone"
    @clear-all="handleClearAll"
  ></todo-footer>
</template>

<script setup>
// import { ref, onMounted, watch } from 'vue';
import draggable from 'vuedraggable';

import TodoHeader from './components/TodoHeader.vue';
import TodoList from './components/TodoList.vue';
import TodoFooter from './components/TodoFooter.vue';
import TodoItem from './components/TodoItem.vue';

import useTodos from './hooks/useTodos';

const {
  todos,
  handleAddTodo,
  handleToggle,
  handleEdit,
  handleDel,
  handleToggleAll,
  handleClearDone,
  handleClearAll,
} = useTodos();
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
